﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Tencent.OA.ACM.Entity.RouteInfo>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder" runat="server">
    <link href="<%= this.Url.Content("~/Content/jquery.fmext.css") %>" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript" src="<%=this.Url.Content("~/content/Scripts/MicrosoftAjax.js") %>"></script>

    <script type="text/javascript" language="javascript" src="<%=this.Url.Content("~/content/Scripts/MicrosoftMvcValidation.js") %>"></script>

    <script type="text/javascript" language="javascript" src="<%=this.Url.Content("~/content/staffChooser.js") %>"></script>
    
    <script type="text/javascript" language="javascript" src="<%=this.Url.Content("~/content/Scripts/jquery.fmext.js") %>"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContainerPlaceHolder" runat="server">
    <div class="title ">
        编辑路线
    </div>
    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm())
       {%>
    <%= Html.ValidationSummary(true) %>
    <div class="form_table">
        <table cellpadding="0" cellspacing="0" style="width: 100%">
            <tr>
                <th>
                    路线名：
                </th>
                <td>
                    <%=this.Html.TextBoxFor(model => model.RouteName, new { maxlength = 40 })%><span class="required">*</span>
                    <span style="color: #999;">推荐格式为：一位字母+三位数字，如:S-001</span>
                    <br />
                    <%= Html.ValidationMessageFor(model => model.RouteName)%>
                </td>
            </tr>
            <tr>
                <th>
                    城 市：
                </th>
                <td>
                    <%--<%=Html.DropDownList("Area", new List<SelectListItem>() {   new SelectListItem() { Text = "深圳", Value = "0" },
                                                                                         new SelectListItem() { Text = "成都", Value = "1" },
                                                                                         new SelectListItem() { Text = "北京", Value = "1" },
                                                                                         new SelectListItem() { Text = "上海", Value = "1" }})%><span class="required">*</span>--%>
                    <%=Html.DropDownList("CityId", Tencent.OA.ACM.App.Controllers.CityInfoController.BindDropDownList())%><span class="required">*</span>
                    <br />
                    <%= Html.ValidationMessageFor(model => model.CityId)%>
                </td>
            </tr>
            <tr>
                <th>
                    班车属性：
                </th>
                <td>
                    <%--<%=Html.DropDownList("RouteTpe", new List<SelectListItem>() {   new SelectListItem() { Text = "上班路线", Value = "0" },
                                                                                         new SelectListItem() { Text = "下班路线", Value = "1" },
                                                                                         new SelectListItem() { Text = "客服路线", Value = "1" },
                                                                                         new SelectListItem() { Text = "夜班路线", Value = "1" } } )%><span class="required">*</span>--%>
                    <%=Html.DropDownList("BusTypeId", Tencent.OA.ACM.App.Controllers.BusTypeController.BindDropDownList())%><span class="required">*</span>
                    <br />
                    <%= Html.ValidationMessageFor(model => model.BusTypeId)%>
                </td>
            </tr>
            <tr>
                <th>
                    路线卡号码：
                </th>
                <td>
                    <%=this.Html.TextBoxFor(model => model.RouteCardId, new { style="ReadOnly" ,maxlength=20})%><span class="required">*</span>
                    <br />
                    <%= Html.ValidationMessageFor(model => model.RouteCardId)%>
                </td>
            </tr>
            <tr>
                <th>
                    台 次：
                </th>
                <td>
                    <%=Html.TextBoxFor(o => o.BusNumber, new { maxlength=10})%><span class="required">*</span>
                    <br />
                    <%= Html.ValidationMessageFor(model => model.BusNumber)%>
                </td>
            </tr>
            <tr>
                <th>
                    运行方向：
                </th>
                <td>
                    <%=Html.DropDownList("BusDirection", new List<SelectListItem>() {  new SelectListItem() { Text = "上班方向", Value = "0" },
                                                                                         new SelectListItem() { Text = "下班方向", Value = "1" } })%><span class="required">*</span>
                </td>
            </tr>
            <tr>
                <th>
                    运行时间：
                </th>
                <td>
                    <span>
                        <%=Html.CheckBox("Monday", new { @class = "workDay" })%>周一</span> <span>
                            <%=Html.CheckBox("Tuesday", new { @class = "workDay" })%>周二</span> <span>
                                <%=Html.CheckBox("Wednesday", new { @class = "workDay" })%>周三</span> <span>
                                    <%=Html.CheckBox("Thursday", new { @class = "workDay" })%>周四</span> <span>
                                        <%=Html.CheckBox("Friday", new { @class = "workDay" })%>周五</span> <span>
                                            <%=Html.CheckBox("Saturday")%>周六</span> <span>
                                                <%=Html.CheckBox("Sunday")%>周日</span> 
                                                <span style="color:#999;">(<%=Html.CheckBox("workDay")%>周一至周五)</span>
                                                <span class="required">*</span> <span id="WorkWeekMessage" style="color: Red; display: none;">运行时间不能为空</span>
                </td>
            </tr>
            <tr>
                <th>
                    容纳人数：
                </th>
                <td>
                    <%= Html.TextBoxFor(model => model.MaxPeoples, new { maxlength = 10 })%><span class="required">*</span>
                    <br />
                    <%= Html.ValidationMessageFor(model => model.MaxPeoples)%>
                </td>
            </tr>
            <tr>
                <th>
                    负责人：
                </th>
                <td>
                    <%= Html.TofUserChooserFor(model => model.Responser, true, "getTofUserID")%>
                    <input type="hidden" id="UseUserIDs" />
                </td>
            </tr>
            <tr>
                <th>
                    站 点：
                </th>
                <td>
                    <div>
                        <a href="#" onclick="newRow(0)">插入第一行</a>
                        <table class="tblData" border="1" cellpadding="0" cellspacing="0" style="width: 650px;">
                            <thead>
                                <th style="width: 100px;">
                                    站点名称
                                </th>
                                <th style="width: 50px;">
                                    到站时间
                                </th>
                                <th style="width: 100px;">
                                    经度
                                </th>
                                <th style="width: 100px;">
                                    纬度
                                </th>
                                <th style="width: 50px;">
                                    计算GPS
                                </th>
                                <th style="width: 200px;">
                                    操作
                                </th>
                            </thead>
                            <tbody id="gvList">
                            </tbody>
                        </table>
                    </div>
                    <div style="color: #999;">
                        <%--<a href="#" onclick="showInMap();">  在GoogleMap中查看该路线。</a>--%>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    计算路线GPS坐标：
                </th>
                <td>
                    <%=Html.CheckBox("IsNeedComputeGpsForChkBox")%>
                </td>
            </tr>
            <tr>
                <th>
                    备 注：
                </th>
                <td>
                    <%=Html.TextArea("Remark", new { style = "width:400px;height:100px;", onkeypress = "return limitTextArea(this,500);", onpropertychange = "return limitTextArea(this,500);" })%>
                </td>
            </tr>
            <tr>
                <th>
                    &nbsp;
                </th>
                <td>
                    <input type="button" value="保 存" onclick="javascript:save();" />
                    <input type="button" value="取 消" onclick="window.location='<%=this.Url.Content("~/Route") %>'" />
                </td>
            </tr>
        </table>
    </div>
    <%= Html.Hidden("Stations")%>
    <%= Html.Hidden("DeleteStationId")%>
    <% } %>

    <script language="javascript" type="text/javascript">

        //员工选择器初始化
        $('.staffChooser').each(function() {
            $(this).staffChooser(true);
            $("#workDay").click(function() {
                var checked = $(this).attr("checked");
                $(".workDay").attr("checked", checked);
            });
        });

        //从员工选择器获取员工ID
        function getTofUserID(e, data, formatted) {
            if (data) {
                var userIDs = $("#UseUserIDs").val();
                $("#UseUserIDs").val(userIDs + data.ID + ";");
            }
        }

        $(document).ready(function() {
            initSiteList();
        });
        function initSiteList() {
            var containerDV = $("#gvList");
            var jsonString = '<%= this.ViewData.Model!=null ? Tencent.OA.ACM.Controllers.StationInfoController.GetJsonStationInfoByRouteID(this.ViewData.Model.RouteId) : "" %>';
            if (jsonString != "") {
                var routeJson = eval(jsonString);
                var routeCount = routeJson.length;
                $.each(routeJson, function(index, o) {
                    var html = createRowHtml(index, o);
                    containerDV.append(html);
                });
            }
        }

        //创建行Html
        function createRowHtml(rowIndex, stationInfo) {       
            rowIndex = parseInt(rowIndex, 10);

            if (stationInfo == null) {
                stationInfo = new Object();
                stationInfo.StationName = "";
                stationInfo.EstimateArriveTime = "";
                stationInfo.Lon = 0;
                stationInfo.Lat = 0;
                stationInfo.StationId = "<%= Guid.Empty.ToString() %>";
            }
            var checkedStr = (stationInfo.IsNeedComputeGPS == 0) ? ' ' : 'checked="checked"';
            var html = '<tr id=' + rowIndex + '><td style=" text-align:left;">';
            html = html + '<input style="width:100px;" maxlength="10" id="StationName" type="text" value="' + stationInfo.StationName + '" />';
            html = html + '<br /><span id="StationNameErrorMessage"  style="color:Red; display:none;">站点名称不能为空</span>'
            html = html + '<span id="StationNameDuplicateErrorMessage"  style="color:Red; display:none;">站点名称不能出现重复</span>'
            html = html + '</td>';
            html = html + '<td><input style="width:50px;" maxlength="5" id="EstimateArriveTime" type="text" value="' + stationInfo.EstimateArriveTime + '" />';
            html = html + '<br /><span id="EstimateArriveTimeErrorMessage"  style="color:Red; display:none;">到站时间不能为空</span>'
            html = html + '<span id="EstimateArriveTimeFormatError"  style="color:Red; display:none;">时间格式不正确</span></td>';
            html = html + '<td><input style="width:100px;" id="Lon" type="text" value="' + stationInfo.Lon + '" disabled="disabled" /></td>';
            html = html + '<td><input style="width:100px;" id="Lat" type="text" value="' + stationInfo.Lat + '" disabled="disabled" /></td>';
            html = html + '<td><input  id="IsNeedComputeGPS" type="checkbox"  ' + checkedStr + ' /></td>';
            html = html + '<td><span id="spanOperation" index=' + (rowIndex) + '><a href="javascript:;" onclick="newRow(this)">插入</a>&nbsp;|&nbsp;';
            html = html + '<a href="javascript:;" onclick="deleteRow(this)">删除</a></span>&nbsp;|&nbsp;<a href="javascript:;" onclick="showInMap(this);">地图中查看</a>';
            html = html + '&nbsp;|&nbsp;<a href="javascript:;" onclick="ShowPhoto(this);">照片</a></span>';
            html = html + '<input style="width:100px;" id="StationId" type="hidden" value="' + stationInfo.StationId + '" />';
            html = html + '</td></tr>';

            return html;
        }
        //当前行对象
        var rowObj;
         
        //更新坐标（用于回调）
        function updLonLat(lon, lat, sid) {
            $(rowObj).parent().parent().find("#Lon").val(lon);
            $(rowObj).parent().parent().find("#Lat").val(lat);
        }
        //在地图中显示
        function showInMap(obj) {
            rowObj = obj;
            var lon = $(obj).parent().parent().find("#Lon").val();
            var lat = $(obj).parent().parent().find("#Lat").val();
            var routeid = '<%=ViewData["rid"] %>';
            var stationId = $(obj).parent().find("#StationId").val();
            var reqUrl = '<%=this.Url.Content("~/Route/ViewInMap?rid=' + routeid + '&sid=' + stationId + '&Lon=' + lon + '&Lat=' + lat + '")%>';

            showModel(reqUrl, '查看路线', 650, 400);
        }

        //查看照片
        function ShowPhoto(obj) {       
            var stationId = $(obj).parent().find("#StationId").val();
            var reqUrl = '<%=this.Url.Content("~/Route/ViewPhoto?StationID=' + stationId + '")%>';
            showModel(reqUrl, '站点照片', 650, 400);
        }

        //新增行
        function newRow(obj) {

            var rowIndex = obj == 0 ? 0 : parseInt($(obj).parent().attr("Index"), 10) + 1;
            var containerDV = $("#gvList");
            var rows = $("#gvList tr");

            //最后行插入
            if (rowIndex == rows.length) {
                var row = null;
                var html = createRowHtml(rowIndex, row);
                containerDV.append(html);
            }
            else {
                $("#gvList tr").each(function(index, row) {

                    if (rowIndex == index) {
                        var html = createRowHtml(index, null);
                        containerDV.append(html);
                    }

                    if (index >= rowIndex) {
                        row.id = parseInt(row.id, 10) + 1;

                        var indexTmp = $(row).find("#spanOperation").attr("index");
                        $(row).find("#spanOperation").attr("index", parseInt(indexTmp, 10) + 1);
                    }
                    containerDV.append(row);

                });
            }
        }

        //删除行
        function deleteRow(obj) {
            if (!confirm("是否确认删除该站点？"))
            { return; }

            var rowIndex = $(obj).parent().attr("Index");
            var containerDV = $("#gvList");
            var rows = $("#gvList tr");

            $("#gvList tr").each(function(index, row) {

                if (index >= rowIndex) {
                    row.id = parseInt(row.id, 10) - 1;

                    var indexTmp = $(row).find("#spanOperation").attr("index");
                    $(row).find("#spanOperation").attr("index", parseInt(indexTmp, 10) - 1);
                }

                if (rowIndex == index) {
                    var stationId = $(row).find("#StationId").val();
                    if (stationId != "<%= Guid.Empty.ToString() %>") {

                        var deleteIds = $("#DeleteStationId").val();
                        if (deleteIds == "") {
                            $("#DeleteStationId").val(stationId);
                        }
                        else {
                            $("#DeleteStationId").val(deleteIds + "," + stationId);
                        }
                    }

                    $(row).remove();
                }
            });
        }

        //输入验证
        function checkInput() {

            //输入空格清空
            $("#RouteName").val(trim($("#RouteName").val()));
            $("#RouteCardId").val(trim($("#RouteCardId").val()));
            $("#BusNumber").val(NumberZen2Han(trim($("#BusNumber").val())));
            $("#MaxPeoples").val(NumberZen2Han(trim($("#MaxPeoples").val())));
            $("#gvList tr").each(function(index, row) {
                $(row).find("#StationName").val(trim($(row).find("#StationName").val()));
                $(row).find("#EstimateArriveTime").val(trim($(row).find("#EstimateArriveTime").val()));
            });

            //手工激活表单验证
            var errors = Sys.Mvc.FormContext.getValidationForForm(document.getElementsByTagName("form")[0]).validate('submit');
            if (errors.length > 0)
                return false;

            var retValue = true;
            $("#WorkWeekMessage").hide();

            if (!($("#Monday").attr("checked") || $("#Tuesday").attr("checked") || $("#Wednesday").attr("checked")
                || $("#Thursday").attr("checked") || $("#Friday").attr("checked") || $("#Saturday").attr("checked") || $("#Sunday").attr("checked"))) {
                $("#WorkWeekMessage").show();
                retValue = false;
            }
            else {

                var rows = $("#gvList tr");

                $("#gvList tr").each(function(index, row) {

                    var StationName = $(row).find("#StationName").val();
                    var EstimateArriveTime = $(row).find("#EstimateArriveTime").val();
                    var Lon = $(row).find("#Lon").val();
                    var Lat = $(row).find("#Lat").val();

                    $(row).find("#StationNameErrorMessage").hide();
                    $(row).find("#StationNameDuplicateErrorMessage").hide();
                    if (StationName == "") {
                        $(row).find("#StationNameErrorMessage").show();
                        retValue = false;
                    }

                    for (indexTemp = index + 1; indexTemp < rows.length; indexTemp++) {

                        var stationNameTemp = $(rows[indexTemp]).find("#StationName").val();

                        if (stationNameTemp != "" && stationNameTemp == StationName) {
                            $(row).find("#StationNameDuplicateErrorMessage").show();
                            retValue = false;
                        }
                    }

                    $(row).find("#EstimateArriveTimeErrorMessage").hide();
                    /*
                    if (EstimateArriveTime == "") {
                        $(row).find("#EstimateArriveTimeErrorMessage").show();
                        retValue = false;
                    }
                    if (EstimateArriveTime == "") {
                        $(row).find("#EstimateArriveTimeErrorMessage").show();
                        retValue = false;
                    }
                    */

                });
            }

            return retValue;
        }

        //保存
        function save() {
            if (!checkInput()) {
                return;
            }

            var postData = new Array();
            $("#gvList tr").each(function(i) {
                var row = new Object();
                row.StationName = trim($(this).find("#StationName").val());
                row.EstimateArriveTime = trim($(this).find("#EstimateArriveTime").val()).replace('：', ':').replace(/(\s*)/g, '');
                row.Lon = $(this).find("#Lon").val();
                row.Lat = $(this).find("#Lat").val();
                row.StationId = $(this).find("#StationId").val();
                row.IsNeedComputeGPS = ($(this).find("#IsNeedComputeGPS").attr("checked")) ? 1 : 0;
                postData.push(row);
            });

            $("#Stations").val(Sys.Serialization.JavaScriptSerializer.serialize(postData));
            document.forms[0].submit();
        }
        //限制textarea输入文本长度
        function limitTextArea(obj,maxlength) {
            var contents = obj.value;
            if (contents.length <= maxlength)
                return true;
            else {
                obj.value = contents.substring(0, maxlength);  
            }
        }
    </script>

</asp:Content>
